<template>
	<view class="cartPage">
		<view class="tit" v-if="cart.length === 0">空空如也</view>
		<view class="father" v-for="(item,index) in cart" :key="item.id">
			<view class="one" :class="actives === index ? 'active': ''" @tap="openDetail(item)">
				<view class="son1">
					<image mode="aspectFit" class="img" :src="item.img_url"></image>
				</view>
				<view class="son2" @touchstart="starts(index,$event)" @touchend="ends(index,$event)">
					<view class="title">{{item.title}}</view>
					<view class="goodsPrice">
						<text>型号 : {{item.goodsNumber}}</text>
						<text>￥{{item.sell_price}}</text>
					</view>
				</view>
			</view>
			<text :class="actives === index ? 'texTentersActive': ''" class="hover-stop-propagation" @click="del(index)">删除</text>
		</view>
	</view>
</template>

<script>
	import Vuex from "vuex";
	export default {
		computed: {
			...Vuex.mapState(["cart", "saveUserInfo"])
		},
		onShow() {
			// 设置底部的tabBar栏购物车的数量
			this.setTabBar();
		},
		onLoad() {
			if (!this.saveUserInfo) {
				uni.showModal({
					title: `请登录`,
					content: `还没登录小程序`,
					success: res => {
						if (res.confirm) {
							uni.switchTab({
								url: "../member/member"
							});
						};
					}
				});
			};
		},
		data() {
			return {
				actives: null,
				startsX: null,
				movesX: null,
				endsX: null,
			};
		},
		methods: {
			...Vuex.mapMutations(["delCart", "setTabBar"]),
			starts(index, event) {
				this.startsX = event.changedTouches[0].pageX;
			},
			ends(index, event) {
				if (this.startsX - event.changedTouches[0].pageX > 10) {
					this.actives = index;
				} else {
					this.actives = null;
				};
			},
			del(index) {
				// 调用vuex中的delCart的方法，删除cart的数组
				this.delCart(index);
				this.actives = null;
			},
			openDetail(item) {
				uni.navigateTo({
					url: "../../goodsDetail/goodsDetail",
					success: res => {
						res.eventChannel.emit('goodsDetail', {
							item,
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.tit {
		width: 100%;
		height: 100%;
		font-size: 50rpx;
		letter-spacing: 20rpx;
		color: #b50e03;
		@include flexCenterCenter;
	}

	.cartPage {
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F8FA;
	}

	.father {
		overflow: hidden;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 6rpx;
	}

	.father:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.one {
		display: flex;
		width: 750rpx;
		height: 200rpx;
	}

	.son1,
	.son2 {
		height: 100%;
	}

	.son1 {
		flex: 1;
	}

	.son2 {
		flex: 2;
		padding-right: 50rpx;
	}

	.father>text {
		width: 150rpx;
		height: 100%;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		right: -150rpx;
		top: 0;
		font-size: 40rpx;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 6rpx;
	}

	@keyframes enters {
		to {
			transform: translateX(-15%);
		}
	}

	.active {
		animation: enters .1s ease;
		animation-fill-mode: forwards;
	}

	@keyframes texTenters {
		to {
			transform: translateX(-100%);
		}
	}

	.texTentersActive {
		animation: texTenters .1s ease;
		animation-fill-mode: forwards;
	}

	// 内容样式
	.img {
		width: 200rpx;
		height: 200rpx;
		display: block;
		margin: 0 auto;
	}

	.title {
		height: 140rpx;
		font-size: 30rpx;
		padding-top: 10rpx;
	}

	.goodsPrice {
		height: 60rpx;
		padding-bottom: 10rpx;
		@include flexBetweenCenter;
	}

	.hover-stop-propagation {
		@include flexCenterCenter;
	}
</style>
